<%- include('./layouts/header.ejs')%>
  <div class="main">
    <%- include('./layouts/navBar.ejs')%>
    <div class="container-fluid">
      <div class="page-title">
        <h1>导航菜单</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <div class="row">
        <div class="col-md-4">
          <form id="myForm">
            <h2>添加新导航链接</h2>
            <div class="form-group">
              <label for="text">文本</label>
              <input id="text" class="form-control" name="text" type="text" placeholder="文本">
            </div>
            <div class="form-group">
              <label for="title">标题</label>
              <input id="title" class="form-control" name="title" type="text" placeholder="标题">
            </div>
            <div class="form-group">
              <label for="link">链接</label>
              <input id="link" class="form-control" name="link" type="text" placeholder="图标">
            </div>
            <div class="form-group">
              <label for="icon">图标</label>
              <input id="icon" class="form-control" name="icon" type="text" placeholder="链接">
            </div>
            <div class="form-group">
              <!-- <button class="btn btn-primary" type="submit">添加</button> -->
              <span class="btn btn-primary" id="btnAdd" >添加</span>
            </div>
          </form>
        </div>
        <div class="col-md-8">
          <div class="page-action">
            <!-- show when multiple checked -->
            <a class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a>
          </div>
          <table class="table table-striped table-bordered table-hover">
            <thead>
              <tr>
                <th class="text-center" width="40"><input type="checkbox"></th>
                <th>文本</th>
                <th>标题</th>
                <th>链接</th>
                <th class="text-center" width="100">操作</th>
              </tr>
            </thead>
            <tbody>
              
              
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <%- include('./layouts/aside.ejs')%>

  <%- include('./layouts/footer.ejs')%>
  <script type="text/template" id="navMenusListTmp">
    {{each data as val key}}
      <tr>
        <td class="text-center"><input type="checkbox"></td>
        <td><i class="{{val.icon}}"></i>{{val.text}}</td>
        <td>{{val.title}}</td>
        <td>{{val.link}}</td>
        <td class="text-center">
          <a href="javascript:;" data-id="{{key}}" class="btnDel btn btn-danger btn-xs">删除</a>
        </td>
      </tr>
    {{/each}}
  </script>
  <script>
     // 1. 发送请求,获取页面的数据
     $.ajax({
       type:'get',
       url:'/getNavMenusData',
       dataType:'json',
       success:function(res){
         if(res&&res.code==0){
           var htmlStr = template('navMenusListTmp',res)
           $('tbody').html(htmlStr)
         }
       }
     })
 
     // 2. 添加导航项
     // 2.1 注册事件
     $('#btnAdd').on('click',function () {
       
      // 2.2 发送ajax请求
      $.ajax({
        type:'post',
        url:'/addNewNavMenus',
        data:$('#myForm').serialize(),
        dataType:'json',
        success:function(res){
          if(res&&res.code==0){
            console.log(res);
            // 重新渲染页面
             var htmlStr = template('navMenusListTmp', res)
            $('tbody').html(htmlStr)

            $('input[name]').val('')
          }
        }
      })
     })
 
     // 3.删除导航
     // 3.1 注册事件
     $('tbody').on('click','.btnDel',function(){

      // 3.2 发送ajax请求
      $.ajax({
        type:'get',
        url:'/delNavMenus',
        data:{
          index:$(this).attr('data-id')
        },
        dataType:'json',
        success:function(res){
          console.log(res);
          if(res&&res.code==0){
             var htmlStr = template('navMenusListTmp', res)
            $('tbody').html(htmlStr)
          }
        }
      })
     })
 </script>
